<template>
	<view class="home">
		<!-- 轮播图 -->
		<swiper class="home-banner" :indicator-dots="true" :autoplay="true" :interval="2000" :duration="500" circular="true" indicator-active-color="#f00">
			<swiper-item v-for="banner in bannerList" :key="banner.id">
				<image class="banner-img" :src="banner.src" mode="scaleToFill"></image>
			</swiper-item>
		</swiper>
		<!-- 页面导航 -->
		<view class="home-nav">
			<view class="nav-item" v-for="nav in navList" :key="nav.src">     
				<image class="item-img" :src="nav.src" mode=""></image>
				<text class="item-name">{{nav.name}}</text>
			</view>
		</view>
		<!-- 课程内容 -->
		<view class="home-course">
			<v-card title="热门课程" more="全部课程>">
				<view class="course-list">
					<v-card-item v-for="course in courseList" :key="course.id" :item="course" type="course"></v-card-item>
				</view>
			</v-card>
			<v-card title="名师大咖" more="全部老师>">
				<view class="course-list">
					<v-card-item v-for ="teacher in teacherList" :key="teacher.id" :item="teacher" type="teacher"></v-card-item>
				</view>
			</v-card>
		</view>
		<!-- 返回顶部按钮 -->
		<v-back-top></v-back-top>
	</view>
</template>
<script lang="ts">
	import {defineComponent} from 'vue'
	export default defineComponent({
		name:'Home'
	})
</script>

<script lang="ts" setup>
import {ref,reactive} from "vue"
import {onLoad,onPageScroll} from '@dcloudio/uni-app'
// 写到引入函数发送请求1.引入HomeReq 然后调用函数发送请求
import {bannerCateList,hotCateList} from '../../../../my-uniApp-guli/src/common/mock/home'
// 引入获取课程的接口
import homeReq from '../../../../my-uniApp-guli/src/api/home'
const bannerList = reactive(bannerCateList)
const navList =reactive(hotCateList)
const courseList = ref ([])
const teacherList = ref ([])


const getHomeCourseList = async ()=>{
	const result = await homeReq.getHomeListData()
	// console.log("rr",result)
		if(result.code === 200){
			courseList.value = result.data.courseList
			teacherList.value = result.data.teacherList
		}
}

onLoad(()=>{
	getHomeCourseList()
	
})

onPageScroll((e)=>{
	uni.$emit('pageScroll',e.scrollTop)
})
</script>

<style lang="less" scoped>
.home{
	width: 100%;
	height: 100%;
	  .home-banner{
			width:100%;
			height: 300upx;
			.banner-img{
				width:100%;
				}
	}
	.home-nav{
		display: flex;
		justify-content: space-around;
		.nav-item{
			width:20%;
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 26upx;
			color:#666;
			.item-img{
				width:72upx;
				height:72upx;
				padding:20upx 0;
			}
		}
	}
	.home-course{
		.course-list{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
			&::after{
				content: "";
				width:335upx;
			}
		}
	}
}
</style>